<template>
  <div>
    <!-- 顶部form表单 -->
    <el-form  el-form ref="form" :model="form" label-width="80px">
      <el-form-item>
        <el-button class="btn" :type="this.shareMain.share_show?'danger':'info'" @click="onSubmit" :disabled="! this.shareMain.share_show"
          >禁止显示</el-button
        >
        <el-select :disabled="! this.shareMain.share_show" v-model="form.warn" :placeholder="this.shareMain.share_show?'禁止该分享显示的原因':'已禁止显示 '+this.shareMain.share_warn">
          <el-option label="封面恶心" value="封面恶心"></el-option>
          <el-option label="色情低俗" value="色情低俗"></el-option>
          <el-option label="血腥暴力" value="血腥暴力"></el-option>
          <el-option label="标题党" value="标题党"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 分享的详细内容 -->
    <div class="share">
      <div class="shareMain">
        <!-- 标题部分 -->
        <div class="title">{{ this.shareMain.share_title }}</div>
        <div class="listMain">
          <!-- 用户资料显示 -->
          <div class="user" @click="getShareByUserId">
            <img :src="require('../../../../../assets/shareflower/shareUserPicture/'+this.shareMain.share_userPhoto)" alt="" />
            <span>
              {{ this.shareMain.share_userName }}
            </span>
          </div>
          <!-- 时间 -->
          <div class="time">{{ this.shareMain.share_time | dateTime }}</div>
        </div>
        <!-- 内容图片 -->
        <img :src="require('../../../../../assets/shareflower/sharePicture/'+this.shareMain.share_picture)" class="pic" alt="" />
        <!-- 文字内容 -->
        <p class="main">
          {{
            this.shareMain.share_main
          }}
        </p>
      </div>
      <!-- 留言 -->
      <div class="comment">
        <p>留言区</p>
        <div>
          <div v-for="(i, r) in comment" :key="r" class="commentList">
            <i class="el-icon-circle-close"
            @click="deleteComment(i.comment_id)"
            ></i>
            <div class="commentUser">
              <img :src="require('../../../../../assets/shareflower/shareUserPicture/'+i.comment_userPhoto)" alt="" />
              <span>{{ i.comment_userName }}</span>
            </div>
            <p>{{ i.comment_main }}</p>
            <p class="time">{{ i.comment_time | dateTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
import Url from "../../http/BaseUrl";

export default {
  data() {
    return {
      share_id: "",
      shareMain: [],
      comment: [],
      form: {
        warn: "",
      },
    };
  },
  methods: {
    getShareByUserId() {
      this.$router.push({
        path: 'square-user',
        query:{userId:this.shareMain.share_userId}
      })
     },
    deleteComment(value) {
      this.$confirm("此操作将删除该评论, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log(value);
            let params = {
              comment_id:value
            };
            httpApi.ShareApi.deleteComment(params).then((res) => {
              console.log(res);
              if(res.data.code == 200) {
                this.getComment();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
    },
    onSubmit() {
      if (this.form.warn == "") {
        this.$message("请选择禁止该分享显示的原因");
        return;
      } else {
        this.$confirm("此操作将禁止该分享显示, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "禁用成功!",
            });
            let params = {
              share_show: 0,
              share_warn: this.form.warn,
              share_id: this.share_id,
            };
            httpApi.ShareApi.changeShow(params).then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.getMain();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    GetRequest() {
      var url = location.search; //获取url中”?”符后的字串
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("?");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
      }
      this.share_id = theRequest.id;
      // console.log(this.share_id);
    },
    getMain() {
      httpApi.ShareApi.getByShareId({ share_id: this.share_id }).then((res) => {
        this.shareMain = res.data.data[0];
        console.log(this.shareMain);
      });
    },
    getComment() {
      httpApi.ShareApi.getCommentByShareId({
        comment_share_id: this.share_id,
      }).then((res) => {
        console.log( this.share_id);
        this.comment = res.data.data;
        console.log(this.comment);
      });
    },
  },
  mounted() {
    this.GetRequest();
    this.getMain();
    this.getComment();
  },
};
</script>

<style lang="scss" scoped>
.btn {
  margin: 0 2rem;
}

.share {
  display: flex;
  width: 70rem;
  color: #333;
  position: relative;

  > .shareMain {
    text-align: center;
    padding: 0 5% 0 7%;
    width: 45rem;
    flex-grow: 1;
    flex-shrink: 2;
    > .title {
      font-size: 26px;
      font-weight: 400;
      color: rgb(67, 66, 66);
      margin: 30px 0 5%;
    }
    > .listMain {
      display: flex;
      justify-content: space-between;
      margin: 0 3% 5%;
      align-items: center;

      > .user {
        user-select: none;
        width: 20%;
        overflow: visible;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        > img {
          width: 40%;
          border-radius: 100px;
        }
        > span {
          width: 50%;
          word-wrap: inherit;
          display: inline-block;
          font-size: 16px;
        }
      }
      > .time {
        font-size: 12px;
      }
    }

    > .pic {
      width: 50%;
      user-select: none;
    }
    > .main {
      word-wrap: break-word;
      text-align: left;
      text-indent: 2em;
      margin: 7% 0;
      font-size: 18px;
      padding: 0 5%;
    }
  }
  .share {
    background-color: red;
  }
  //  留言样式

  > .comment {
    margin-top: 30px;
    width: 20rem;
    > p {
      width: 20rem;
      font-size: 18px;
      margin-bottom: 20px;
    }
    .commentList {
      width: 100%;
      padding: 10px 5px;
      border: 1px solid rgba($color: #333, $alpha: 0.5);
      border-radius: 5px;
      position: relative;
      >.el-icon-circle-close{
        position: absolute;
        right: 1rem;
        top: 1rem;
      }
      > .commentUser {
        margin-bottom: 10px;
        user-select: none;
        width: 40%;
        overflow: visible;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        > img {
          width: 20%;
          border-radius: 100px;
        }
        > span {
          width: 70%;
          word-wrap: inherit;
          display: inline-block;
          font-size: 12px;
        }
      }
      > p {
        font-size: 16px;
        color: #333;
        margin: 0px 5px;
      }
      > .time {
        text-align: right;
        font-size: 6px;
      }
    }
  }
}
</style>
